<!DOCTYPE html>
<html>
<head>
<title>Piston-Crank Mechanism</title>
<style>
  body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #f8f9fa;
  }
  canvas {
    border: 1px solid #dee2e6;
    background-color: white;
  }
</style>
</head>
<body>
<canvas id="pistonCanvas" width="400" height="600"></canvas>
<script>
const canvas = document.getElementById('pistonCanvas');
const ctx = canvas.getContext('2d');

// --- 1. Define Key Coordinates ---
// These points are chosen to visually match the provided diagram's geometry.
const A = { x: 180, y: 205 }; // Piston pin
const B = { x: 260, y: 420 }; // Crank pin
const C = { x: 210, y: 500 }; // Fixed pivot

// --- 2. Drawing Functions and Styles ---
ctx.strokeStyle = 'black';
ctx.fillStyle = 'black';
ctx.lineCap = 'round'; // For a smoother, hand-drawn feel on thick lines

// --- 3. Draw Fixed Structures (Cylinder and Pivot Base) ---

// Define cylinder dimensions
const cylLeftX = 100;
const cylRightX = 280;
const cylTopY = 100;
const cylBottomY = 270;
const hatchWidth = 20;

// Draw cylinder walls
ctx.lineWidth = 8;
ctx.beginPath();
ctx.moveTo(cylLeftX, cylTopY);
ctx.lineTo(cylLeftX, cylBottomY);
ctx.moveTo(cylRightX, cylTopY);
ctx.lineTo(cylRightX, cylBottomY);
ctx.moveTo(cylLeftX, cylTopY);
ctx.lineTo(cylRightX, cylTopY);
ctx.stroke();

// Draw hatching for the fixed cylinder
ctx.lineWidth = 3;
// Left wall hatching
for (let y = cylTopY; y < cylBottomY + hatchWidth * 2; y += 10) {
    ctx.beginPath();
    ctx.moveTo(cylLeftX, y);
    ctx.lineTo(cylLeftX - hatchWidth, y - hatchWidth);
    ctx.stroke();
}
// Right wall hatching
for (let y = cylTopY; y < cylBottomY + hatchWidth * 2; y += 10) {
    ctx.beginPath();
    ctx.moveTo(cylRightX, y);
    ctx.lineTo(cylRightX + hatchWidth, y - hatchWidth);
    ctx.stroke();
}

// Draw fixed base for pivot C
const groundBaseY = C.y + 40;
const groundWidth = 50;
ctx.lineWidth = 6;
ctx.beginPath();
ctx.moveTo(C.x - groundWidth, groundBaseY);
ctx.lineTo(C.x + groundWidth, groundBaseY);
ctx.stroke();

// Draw hatching for the base
ctx.lineWidth = 3;
for (let x = C.x - groundWidth; x <= C.x + groundWidth; x += 10) {
    ctx.beginPath();
    ctx.moveTo(x, groundBaseY);
    ctx.lineTo(x - 10, groundBaseY + 15);
    ctx.stroke();
}

// Draw triangular support structure for pivot C
ctx.lineWidth = 10;
ctx.beginPath();
ctx.moveTo(C.x, C.y);
ctx.lineTo(C.x - 15, groundBaseY);
ctx.moveTo(C.x, C.y);
ctx.lineTo(C.x + 15, groundBaseY);
ctx.stroke();


// --- 4. Draw Moving Parts (Piston and Rods) ---

// Draw Piston
ctx.lineWidth = 6;
ctx.strokeRect(110, 180, 140, 55);

// Draw vertical construction line from A
ctx.save();
ctx.beginPath();
ctx.lineWidth = 1.5;
ctx.setLineDash([4, 4]);
ctx.moveTo(A.x, A.y);
ctx.lineTo(A.x, C.y - 70);
ctx.stroke();
ctx.restore();

// Draw Connecting Rod (AB) and Crank (BC)
ctx.lineWidth = 12;
ctx.beginPath();
ctx.moveTo(A.x, A.y);
ctx.lineTo(B.x, B.y);
ctx.lineTo(C.x, C.y);
ctx.stroke();

// --- 5. Draw Pins (Joints) ---
// Drawn on top for correct layering
const pinRadius = 8;
ctx.lineWidth = 5;
function drawPin(p) {
    ctx.beginPath();
    ctx.arc(p.x, p.y, pinRadius, 0, 2 * Math.PI);
    ctx.fillStyle = 'white';
    ctx.fill();
    ctx.strokeStyle = 'black';
    ctx.stroke();
}
drawPin(A);
drawPin(B);
drawPin(C);

// --- 6. Add Labels ---
ctx.fillStyle = 'black';
ctx.font = 'bold 36px serif';
ctx.fillText('A', A.x + 20, A.y + 5);
ctx.fillText('B', B.x + 18, B.y + 8);
ctx.fillText('C', C.x - 45, C.y + 10);

</script>
</body>
</html>